<{include file="www/header.tpl"}>
<{include file="www/header-base.tpl"}>
<div class="base-banner-wrap">
    <img src="<{$ziying.bannerUrl}>" class="base-banner">
</div>

<div class="zy_lux fix">

  <div class="main">
      <div class="product-info fix">
        <img src="/resource/www/imgs/ziying-icon.png" class='zyicon'> 
        <div class="proinfo-left">
                  
          <div class="proinfo-left-top">
            <div class="proimg">
            <ul>
            <{foreach from=$ziying.images item=image}>
            <li class="li"><img class="img" src="<{$image}>"></li>
            <{/foreach}>
            </ul>
            </div>
            <div class="sleft" onclick="onShift('left')" ><img src="/resource/www/imgs/prev-icon.png"></div>
            <div class="sright" onclick="onShift('right')" ><img src="/resource/www/imgs/next-icon.png"></div>
            <div class="img-nav fix">
            <ul>
            <{foreach from=$ziying.images item=image name=zyimg}>
            <li class="nav-item item<{$smarty.foreach.zyimg.index}>"></li>
            <{/foreach}>
            </ul>
            </div>        
          </div>
          
          <div class="proinfo-left-bottom">
          <{include file="www/ziying/widget_days.tpl"}>
          </div>
        </div>
        
        <div class="proinfo-right">
          <div class="title"><{$ziying.name}></div>
          <div class="numbanner fix">
          <span><em class='num'><{$ziying.zan}></em>人赞过</span>
          <span>已有<em class='num'><{$ziying.orders}></em>人预定</span>
          </div>
        
          <div class="price fix">
          <dl>
          <dt class='ptitle'>最低价:</dt>
          <dd class='right'><span class='val'>￥<{$minprice}></span><span class='unit'>/人</span></dd>
          </dl>
          </div>

          <div class='recommend fix'>
          <i class='ricon'></i>
          <span class='rtitle'>不能拒绝的理由</span>
          <ul>
          <{foreach from=$ziying.recommend item=r}>
          <li class='right'><i></i><{$r}></li>
          <{/foreach}>
          </ul>
          </div>    
          
          <div class="provider fix">
          <span class='left'>提供者:</span>
          <span class='proicon'><img src="<{$ziying.providerIcon}>"></span>
          <span class='proname'><{$ziying.provider}></span>
          <span class='renzheng'>哇吖认证，品质保证</span>
          </div>

          <div class="city fix">
          <span class='left'>目的地:</span>
          <ul>
          <{foreach from=$ziying.city item=c}>
          <li class='right'><{$c}></li>
          <{/foreach}>
          </ul>
          </div>
          
          <div class="days fix">
          <span class='left'>出行天数:</span>
          <span class='right'><{$ziying.days}>天</span>
          </div>
          <form action="/order/add/ziying" method="POST" onSubmit="return form_submit_ziying(this)">
          <div class='reservation fix'>
          <input type="hidden" name="goodsId" value="<{$ziying.id}>">
          <ul>
          <li class='li fix'>
          <span class='left'>出行日期:</span>
          <{foreach from=$priceofdays name=pd key=day item=price}>
          <{if $smarty.foreach.pd.index==0}>
          <select name='startDay' class='select' value='<{$day}>'>
          <{/if}>
          <{/foreach}>
          <{foreach from=$priceofdays key=day item=price}>
          <option value='<{$day}>'><{$day}>&nbsp;&nbsp;￥<{$price}></option>
          <{/foreach}>
          <{if $priceofdays}>
          </select>
          <{/if}>
          </li>
          <li class='li fix'>
          <span class='left'>出行人数:</span>
          <span class='minus'><i></i></span>
          <input type='text' name='persons' class='input' value=1>
          <span class='add'><i></i></span>
          </li>
          <li class='li fix' style='margin:20px 0;'>
          <span class='left'>总价:</span>
          <span class='totalp'>￥---</span>
          <input type='submit' name='submit' value='加入购物车' class='yuyue'>
          </li>
          <li class="li-icon fix">
          
          <span class='share'></span>
          <div class="sh-box fix" style='float:left;display:none;'>
          <span class='sina'></span>
          <span class='wx'></span>
          <span class='qq'></span>
          </div>
          <span class='waya'></span>
          <span class='waya-txt'>联系哇吖</span>
          </li>
          </ul>
          </div>
          </form>
        </div>
        <div id='wx-erwm' style='display:none;'></div>
    </div>
    <div class="product-desc">
    <div class="loader-skin">
    <img src="/resource/www/imgs/ajax-loader-blue.gif">
    </div>
    </div>
  </div>

</div>
<script type="text/javascript">
$(document).ready(function() {
    // 顶部轮播效果
    onFocus();
    // 请求数据
    $.post('/ziying/get_product_description',{zyId:<{$ziying.id}>},function(o){
    	if(o){
            $(".loader-skin").hide();
    		$(".product-desc").append(o);
    $(window).load(function(){
    //初始化定位参数
    var tabHeight=$(".product-desc .tabbar-wrap").height();
    var productdescHeight=$(".product-desc").height();
    var tabpos=$(".product-desc .tabbar-wrap").offset().top;
    var cptspos=$(".product-desc .cpts").offset().top-tabHeight-20;
    var xcjspos=$(".product-desc .xcjs").offset().top-tabHeight-20;
    var fyjspos=$(".product-desc .fyjs").offset().top-tabHeight-20;
    var ydxzpos=$(".product-desc .ydxz").offset().top-tabHeight-20;
    var pjpos=$(".product-desc .pj").offset().top-tabHeight-20;
    alert("tab:"+tabpos+"cpts:"+cptspos+"xcjs:"+xcjspos+"fyjs:"+fyjspos+"ydxz:"+ydxzpos+"pj:"+pjpos);
    var daylistpos=$(".xcjs-wrap .daylist").offset().top-tabHeight-20;
    var daylistHeight=$(".xcjs-wrap .daylist").height();
    <{section name=daypos loop=$ziying.days}>
    var daypos<{$smarty.section.daypos.index+1}>=$(".xcjs-content .content .day<{$smarty.section.daypos.index+1}>").offset().top-tabHeight-20;
    <{/section}>
    //顶部导航 
    $(".product-desc .tabbar .tab").click(function(){
        var index=$(this).index();
        index++;
        var location=".product-desc .tab"+index;
        var pos=$(location).offset().top-tabHeight-10;
        $(window).scrollTop(pos);
    });
    //行程介绍时间导航
    $(".xcjs-wrap .daylist .day").click(function(){
        var index=$(this).index();
        index++;
        var location=".xcjs-content .content .day"+index;
        var pos=$(location).offset().top-tabHeight-10;
        $(window).scrollTop(pos);
    });

    $(window).scroll(function(){
       var top=$(window).scrollTop();
       //判断tab是否固定到窗口顶部
       if(top>tabpos && top<productdescHeight+tabpos){
           $(".product-desc .tabbar").addClass('barfix');
       }
       else{
           $(".product-desc .tabbar").removeClass("barfix");
       }
       //判断滚动的位置所属的tab
       if(top<xcjspos){
           $(".product-desc .tabbar .tab").removeClass("active");
           $(".product-desc .tabbar .tab").eq(0).addClass("active");
       }
       else if(top>xcjspos&&top<fyjspos){
           $(".product-desc .tabbar .tab").removeClass("active");
           $(".product-desc .tabbar .tab").eq(1).addClass("active");
       }
       else if(top>fyjspos&&top<ydxzpos){
           $(".product-desc .tabbar .tab").removeClass("active");
           $(".product-desc .tabbar .tab").eq(2).addClass("active");
       }
       else if(top>ydxzpos&&top<pjpos){
           $(".product-desc .tabbar .tab").removeClass("active");
           $(".product-desc .tabbar .tab").eq(3).addClass("active");
       }
       else if(top>pjpos){
           $(".product-desc .tabbar .tab").removeClass("active");
           $(".product-desc .tabbar .tab").eq(4).addClass("active");
       }
       //判断行程介绍的时间导航是否固定到窗口顶部
       if(top>daylistpos && top<fyjspos-daylistHeight){
           $(".xcjs-wrap .daylist").addClass("barfix");
       }else{
           $(".xcjs-wrap .daylist").removeClass("barfix");
       }
       //判断滚动位置属于时间导航的哪一天
       if(top<daypos1+$('.xcjs-content .content .day1').height()){
           $(".xcjs-wrap .daylist .day").removeClass("active");
           $(".xcjs-wrap .daylist .day").eq(0).addClass("active");
       }
       <{section name=dayRange loop=$ziying.days-1}>
       <{if $smarty.section.dayRange.last==true }>
       else if(top>daypos<{$smarty.section.dayRange.index+2}>){
           $(".xcjs-wrap .daylist .day").removeClass("active");
           $(".xcjs-wrap .daylist .day").eq(<{$smarty.section.dayRange.index+1}>).addClass("active");
       }   
       <{else}>
       else if(top>daypos<{$smarty.section.dayRange.index+2}> && top<daypos<{$smarty.section.dayRange.index+3}>){
           $(".xcjs-wrap .daylist .day").removeClass("active");
           $(".xcjs-wrap .daylist .day").eq(<{$smarty.section.dayRange.index+1}>).addClass("active");
       }
       <{/if}>
       <{/section}>
     });
     });
     }
   },'json');
    
    //$.post('/ziyingajax/ajax_scanAdd/<{$ziying.id}>', '', function (o) {}, 'json');
});

//鼠标效果
$('.proinfo-left-top').mouseover(function(){
	$(".sleft").show();
	$(".sright").show();
});
$('.proinfo-left-top').mouseout(function(){
	$(".sleft").hide();
	$(".sright").hide();
});
$('span.share').mouseover(function(){
	$('div.sh-box').fadeIn(1500);
});
$('span.waya').mouseenter(function(){
        $('span.waya-txt').fadeIn(1000);
});
$('span.waya').mouseleave(function(){
        $('span.waya-txt').hide();
});
$('li.li-icon').mouseleave(function(){
	$('div.sh-box').hide();
        $('span.waya-txt').hide();
});

//人数计数器
$('.zy_lux .main .product-info .proinfo-right .reservation .add').click(function(){
        var preval=$("input[name='persons']").val();
        var sday=$("select[name='startDay']").val();
        var limitval=leftperson[sday];
        if(preval){
          if(preval<=limitval-1)
          preval++;
        }else{preval=1;}
        $("input[name='persons']").val(preval);
        $('.product-info .reservation .totalp').html("￥"+priceofdays[sday]*preval);
});
$('.zy_lux .main .product-info .proinfo-right .reservation .minus').click(function(){
        var preval=$("input[name='persons']").val();
        var sday=$("select[name='startDay']").val();
        if(preval){
          if(preval>=2)
          preval--;
        }else{preval=1;}
        $("input[name='persons']").val(preval);
        $('.product-info .reservation .totalp').html("￥"+priceofdays[sday]*preval);
});
$("input[name='persons']").change(function(){
        var person=$(this).val();
        var reg=/^[0-9]*[1-9][0-9]*$/;
        var sday=$("select[name='startDay']").val();
        if(!reg.test(person)){
          layer.msg('请输入正确的人数！');
          $(this).val(1);
          return;
        }else{
          var limitval=leftperson[sday];
          if(person > limitval){
            layer.msg('没有足够的库存！');
            $(this).val(1);
            return;
          }
        }
        $('.product-info .reservation .totalp').html("￥"+priceofdays[sday]*person);
});
//更改时间初始化人数
$("select[name='startDay']").change(function(){
         $("input[name='persons']").val(1);
         var d=$(this).val();
         $('.product-info .reservation .totalp').html("￥"+priceofdays[d]);
});
//第三方分享
$(".product-info .reservation .sina").click(function(){
         shares('sina','','我收藏了哇吖自由行的<{$ziying.name}>，大家快来看看！',location.href,'http://www.wayatrip.com<{$ziying.images[0]}>')
});
$(".product-info .reservation .wx").click(function(){
        showBox($('.alert-bg2'), $('.share-box'));
});
$(".product-info .reservation .qq").click(function(){
         shares('qq','','我收藏了哇吖自由行的<{$ziying.name}>，大家快来看看',location.href,'http://www.wayatrip.com<{$ziying.images[0]}>')
});

function form_submit_ziying(){
	var ostartDay = $("select[name='startDay']").val();
    if (!$.trim(ostartDay)) {
        layer.msg('请输入开始时间');
        return false;
    }
    var oPersons = $("input[name='persons']").val();
    var oNumberReg =  /^[0-9]*[1-9][0-9]*$/;
    if (!$.trim(oPersons) || !oNumberReg.test($.trim(oPersons)) ) {
        layer.msg('请输入正确的人数');
        return false;
    }
    return true;
}

function onFocus() {
    var oFocus = $('.proimg');
    var aLi = oFocus.find('ul .li');
    var iNow = 0;
    var timer = null;
    function fnFade() {
        aLi.each(function (i){
            if ( i != iNow ) {
                aLi.eq(i).fadeOut().css('z-index','-10');
                if($('.img-nav .item'+i).hasClass('active'))
                {$('.img-nav .item'+i).removeClass('active');}
            } else {
                aLi.eq(i).fadeIn().css('z-index','1');
                $('.img-nav .item'+i).addClass('active');
            }
        });
    }
    fnFade();
    function autoPlay() {
        timer = setInterval(function () {
            iNow = oFocus.find('ul .li:visible').index();
            iNow++;
            iNow%=aLi.length;
            fnFade();
        }, 10000);
    }
    autoPlay();
}

function onShift(type) {
    var oShift = $('.proimg');
    var oLi = oShift.find('ul .li');
    var iNow = oShift.find('ul .li:visible').index();

    function fnShift() {
    	if(type=='right'){
            oLi.each(function (i){
                 if ( i == iNow ) 
                 {
                  oLi.eq(i).fadeOut().css('zIndex', -10);
                  $('.img-nav .item'+i).removeClass('active');
                 }
                 if (i==(iNow+1)%oLi.length) 
                 {
                  oLi.eq(i).fadeIn().css('zIndex',1);
                  $('.img-nav .item'+i).addClass('active');
                 }
            });
        }else{
        	oLi.each(function (i){
                if ( i == iNow ) 
                {
                 oLi.eq(i).fadeOut().css('zIndex', -10);
                 $('.img-nav .item'+i).removeClass('active');
                }
                if (i==(iNow-1+oLi.length)%oLi.length) 
                {
                 oLi.eq(i).fadeIn().css('zIndex',1);
                 $('.img-nav .item'+i).addClass('active');
                }
           }); 
        }
    }
    fnShift();
    
  
}
</script>
<{include file="www/footer.tpl"}>
